<template>
  <div class="home">
    <div class="contain">
      <!-- 第一层 -->
      <div class="title">
        <dv-decoration-10 style="width:30%;height:5px;" />
        <div class="center">
          <dv-decoration-8 style="width:200px;height:50px;transform: translateY(50%);" />
          <div class="text">
            <span>南昌市可视化平台</span>
            <dv-decoration-6 style="width:200px;height:10px;" />
          </div>
          <dv-decoration-8 :reverse="true" style="width:200px;height:50px;transform: translateY(50%);" />
        </div>
        <dv-decoration-10 style="width:30%;height:5px;transform: rotateY(180deg);" />
      </div>
      <!-- 第二层 -->
      <div class="mapBox">
        <div class="left">
          <div class="left1">
            <dv-border-box-13>
              <div class="left1Center">
                <span class="iconfont icon-xunifangbingduxitong titleyi">&nbsp;<span>南昌市疫情</span></span>
                <div class="chartsLine">
                  <LEftTop :textColor="item.textColor" :chartColor="item.echartsColor" :title="item.name"
                    :value="item.value" v-for="item in yiqingData" :key="item.value"></LEftTop>
                </div>
              </div>
            </dv-border-box-13>
          </div>
          <div class="left2">
            <dv-border-box-13>
              <div class="left2Center">
                <span class="iconfont icon-shujudian titleyi">&nbsp;<span>本土新增</span></span>
                <div class="chartsLine">
                  <LeftTop2></LeftTop2>
                </div>
              </div>
            </dv-border-box-13>
          </div>
        </div>
        <div class="map">
          <div class="maptitle">
            <dv-decoration-7 style="width:200px;height:50px;">&emsp;<span class="insideTitle">疫情分布图</span>&emsp;
            </dv-decoration-7>
          </div>
          <dv-border-box-13>
            <Map></Map>
          </dv-border-box-13>
        </div>
        <div class="right">
          <div class="right1">
            <dv-border-box-13>
              <div class="right1Center">
                <span class="iconfont icon-qushitu titleyi">&nbsp;<span>疫情趋势</span></span>
                <div class="chartsLine">
                  <rightTop></rightTop>
                </div>
              </div>
            </dv-border-box-13>
          </div>
          <div class="right2">
            <dv-border-box-13>
              <div class="right2Center">
                <span class="iconfont icon-zhuzhuangtuicon titleyi">&nbsp;<span>地区疫情排行</span></span>
                <div class="chartsLine">
                  <rightTop2></rightTop2>
                </div>
              </div>
            </dv-border-box-13>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="bottomLeft">
          <div class="center_box">
            <dv-border-box-13>
              <div class="center_box_center">
                <span class="iconfont icon-zhuzhuangtuicon BottomTitle">&nbsp;<span>地区疫情警报</span></span>
                <div class="chartsLine">
                  <bottonLeft></bottonLeft>
                </div>
              </div>
            </dv-border-box-13>
          </div>
        </div>
        <div class="bottomCenter">
          <div class="center_box2">
            <dv-border-box-13>
              <div class="center_box_center">
                <span class="iconfont icon-zhuzhuangtuicon BottomTitle">&nbsp;<span>近七日各地区核酸检测数</span></span>
                <div class="chartsLine">
                  <bottomCenter></bottomCenter>
                </div>
              </div>
            </dv-border-box-13>
          </div>
        </div>
        <div class="bottomRight">
          <div class="center_box3">
            <dv-border-box-13>
              <div class="center_box_center">
                <span class="iconfont icon-zhuzhuangtuicon BottomTitle">&nbsp;<span>本日各地区核酸覆盖率</span></span>
                <div class="chartsLine">
                  <bottomRight></bottomRight>
                </div>
              </div>
            </dv-border-box-13>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Map from "@/components/map/index.vue"
import LEftTop from "@/components/leftTop/index.vue"
import { yiqingData } from "@/mockData/leftTop1Data"
import LeftTop2 from "@/components/leftTop2/index.vue"
import rightTop from "@/components/rightTop/index.vue"
import rightTop2 from "@/components/rightTop2/index.vue"
import bottonLeft from "@/components/bottonLeft/index.vue"
import bottomRight from "@/components/bottomRight/index.vue"
import bottomCenter from "@/components/bottomCenter/index.vue"
export default {

  mixins: [],
  components: {
    Map, LEftTop, LeftTop2, rightTop, rightTop2, bottonLeft, bottomRight, bottomCenter
  },
  data() {
    return {
      yiqingData: yiqingData
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() { },
  methods: {}
}
</script>

<style lang="less" scoped>
.home {
  color: #d3d6dd;
  width: 1920px;
  height: 1080px;
  position: absolute;
  padding: 0 5%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  overflow: hidden;
}

.contain {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px 16px 0 16px;
  background-image: url("../assets/pageBg.png");
  background-size: cover;
  background-position: center center;

  .title {
    margin-top: 15px;
    height: 10%;
    display: flex;
    align-items: center;

    .center {
      width: 40%;
      display: flex;
      flex-wrap: wrap;

      .text {
        flex: 1;
        font-size: 24px;
        height: 100%;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transform: translateY(100%);
      }
    }

  }
}

.iconfont {
  font-size: 14px;
}

.mapBox {
  width: 100%;
  height: 58%;
  display: flex;
  justify-content: center;

  .map {
    width: 40%;
    height: 540px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .maptitle {
      height: 150px;
      display: flex;
      align-items: center;
      font-size: 18px;
      color: #00dfff;
      font-weight: bold;

      .insideTitle {
        letter-spacing: 3px;
      }
    }
  }

  .titleyi {
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    padding-left: 20px;
    padding-top: 5px;

    span {
      color: #FFFFFF
    }
  }

  .left {
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .left1 {
      width: 100%;
      height: 50%;
      padding: 50px 10% 0 1%;

      .left1Center {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;


        .chartsLine {
          flex: 1;
          width: 100%;
          display: flex;
          align-items: center;
          transform: translateY(-10%);
        }
      }
    }

    .left2 {
      width: 100%;
      height: 50%;
      padding: 50px 10% 0 1%;

      .left2Center {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;


        .chartsLine {
          flex: 1;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          transform: translateY(-8%);
        }
      }
    }
  }

  .right {
    width: 30%;
    height: 100%;

    .right1 {
      width: 100%;
      height: 50%;
      padding: 50px 1% 0 10%;

      .right1Center {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;

        .chartsLine {
          flex: 1;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          transform: translateY(-10%);
        }
      }
    }

    .right2 {
      width: 100%;
      height: 50%;
      padding: 50px 1% 0 10%;

      .right2Center {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;


        .chartsLine {
          flex: 1;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          transform: translateY(-7%);
        }
      }
    }
  }
}

.bottom {
  flex: 1;
  width: 100%;
  padding: 10px 0 3% 0;
  display: flex;
  justify-content: space-around;

  .bottomLeft {
    width: 30%;
    height: 100%;

    .center_box {
      width: 100%;
      height: 100%;
      padding: 10px 9.5% 0 1%;

      .center_box_center {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;

        .BottomTitle {
          height: 50px;
          width: 100%;
          padding-left: 20px;
          display: flex;
          align-items: center;

          span {
            color: #FFFFFF;
          }
        }

        .chartsLine {
          flex: 1;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          transform: translateY(-8%);
        }
      }
    }
  }

  .bottomCenter {
    width: 40%;
    height: 100%;
    transform: translateY(2px);

    .center_box2 {
      width: 100%;
      height: 100%;
      padding: 0 1%;

      .center_box_center {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;

        .BottomTitle {
          height: 50px;
          width: 100%;
          padding-left: 20px;
          display: flex;
          align-items: center;

          span {
            color: #FFFFFF;
          }
        }

        .chartsLine {
          flex: 1;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          transform: translateY(-8%);
        }
      }

    }
  }

  .bottomRight {
    width: 30%;
    height: 100%;

    .center_box3 {
      width: 100%;
      height: 100%;
      padding: 10px 0.5% 0 9.5%;

      .center_box_center {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;

        .BottomTitle {
          height: 50px;
          width: 100%;
          padding-left: 20px;
          display: flex;
          align-items: center;

          span {
            color: #FFFFFF;
          }
        }

        .chartsLine {
          flex: 1;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          transform: translateY(-8%);
        }
      }
    }
  }

}

/deep/.border-box-content {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
